<template>
  <div class="app-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div style="text-align: center; color: black"><h2>协议主体</h2></div>
      <el-row>
        <el-col :span="12"
          ><el-form-item label="协议客户" prop="name">
            <el-select
              v-model="ruleForm.date3"
              placeholder="选择状态"
              filterable
              clearable
              remote
              reserve-keyword
            >
              <el-option label="状态一" value="zhuangtai1"></el-option>
              <el-option label="状态二" value="zhuangtai2"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="协议状态">
            <el-select
              v-model="ruleForm.date3"
              placeholder="选择状态"
              filterable
              clearable
              remote
              reserve-keyword
            >
              <el-option label="状态一" value="zhuangtai1"></el-option>
              <el-option label="状态二" value="zhuangtai2"></el-option>
            </el-select> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="购进指标">
            <el-select v-model="ruleForm.date1" placeholder="金额">
              <el-option label="金额一" value="jine1"></el-option>
              <el-option label="金额二" value="jine2"></el-option>
            </el-select>
            <el-input
              placeholder="请输入金额"
              v-model="input"
              style="display: inline-block; width: 40%; margin-left: 10px"
            >
            </el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="纯销指标">
            <el-select
              filterable
              clearable
              remote
              reserve-keyword
              v-model="ruleForm.date1"
              placeholder="金额"
            >
              <el-option label="金额一" value="jine1"></el-option>
              <el-option label="金额二" value="jine2"></el-option>
            </el-select>
            <el-input
              placeholder="请输入金额"
              v-model="input"
              style="display: inline-block; width: 40%; margin-left: 10px"
            >
            </el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"
          ><el-form-item label="销售区域">
            <el-select
              v-model="ruleForm.date2"
              placeholder="选择区域"
              filterable
              clearable
              remote
              reserve-keyword
            >
              <el-option label="区域一" value="quyu1"></el-option>
              <el-option label="区域二" value="quyu2"></el-option>
            </el-select>
            <el-tag style="margin-left: 10px" closable> 全国 </el-tag>
          </el-form-item></el-col
        >
        <el-col :span="12"
          ><el-form-item label="签订时间"
            ><el-date-picker
              v-model="value3"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00"
            >
            </el-date-picker> </el-form-item
        ></el-col>
      </el-row>

      <el-form-item label="购进渠道">
        <el-select v-model="ruleForm.date2" placeholder="指定渠道">
          <el-option label="区域一" value="quyu1"></el-option>
          <el-option label="区域二" value="quyu2"></el-option>
        </el-select>
        <el-select
          v-model="ruleForm.date2"
          placeholder="请选择渠道"
          filterable
          clearable
          remote
          reserve-keyword
          style="margin-left: 10px"
        >
          <el-option label="区域一" value="quyu1"></el-option>
          <el-option label="区域二" value="quyu2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="desc">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="指定渠道编码" width="180">
          </el-table-column>
          <el-table-column prop="name" label="指定渠道名称" width="180">
          </el-table-column>
          <el-table-column prop="address" label="所在省"> </el-table-column>
        </el-table>
      </el-form-item>
      <div style="text-align: center; color: black"><h2>产品政策</h2></div>
      <el-row class="row-text">
        <el-col :span="2"
          ><el-button type="primary">添加产品</el-button></el-col
        >
        <el-col :span="5"
          ><span
            >购进总指标(万元): <span class="row-span">￥123</span></span
          ></el-col
        >
        <el-col :span="12"
          ><span
            >指标按季度分解(万元):
            <span class="row-span"
              >[Q1]￥12.5,[Q2]￥12.5,[Q3]￥12.5,[Q4]￥12.5,</span
            ></span
          ></el-col
        >
        <el-col :span="5"
          ><span
            >纯销总指标(万元): <span class="row-span">￥123</span></span
          ></el-col
        >
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :span="8"
          ><el-form-item label="产品" prop="name">
            <el-select
              v-model="ruleForm.date3"
              placeholder="选择产品"
              filterable
              clearable
              remote
              reserve-keyword
              style="width: 110px"
            >
              <el-option label="产品一" value="chanpin1"></el-option>
              <el-option label="产品二" value="chanpin2"></el-option>
            </el-select>
            <el-link type="primary" :underline="false" style="margin-left: 10px"
              >美复胶丸 24粒/盒</el-link
            ></el-form-item
          ></el-col
        >
        <el-col :span="8"
          ><el-form-item label="协议效期">
            <el-date-picker
              v-model="value"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item style="float: right">
            <el-button type="warning">删除</el-button></el-form-item
          ></el-col
        >
      </el-row>

      <el-row class="demo-autocomplete" style="margin-top: 20px">
        <el-col :span="3" style="margin-left: 100px">
          <div class="sub-title">协议价(元)</div>
          <el-input
            class="inline-input"
            v-model="state1"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="3" class="demo-left">
          <div class="sub-title">票折(元)</div>
          <el-input
            class="inline-input"
            v-model="state2"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="3" class="demo-left">
          <div class="sub-title">购进指标量(大单位)</div>
          <el-input
            class="inline-input"
            v-model="state3"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="3" class="demo-left">
          <div class="sub-title">购进指标量(小单位)</div>
          <el-input
            class="inline-input"
            v-model="state4"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="3" class="demo-left">
          <div class="sub-title">购进金额(万元)</div>
          <el-input
            class="inline-input"
            v-model="state5"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="3" class="demo-left">
          <div class="sub-title">纯销指标量(元)</div>
          <el-input
            class="inline-input"
            v-model="state6"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="3" class="demo-left">
          <div class="sub-title">纯销指标量(元)</div>
          <el-input
            class="inline-input"
            v-model="state7"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>

      <el-row class="demo-autocomplete" style="margin-top: 30px">
        <el-col :span="2" style="margin-left: 100px">
          <div class="sub-title">分销奖励</div>
          <el-input
            class="inline-input"
            v-model="state1"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="2" class="demo-left">
          <div class="sub-title">费用科目</div>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3" class="demo-left">
          <div class="sub-title">购进指标量(大单位)</div>
          <el-input
            class="inline-input"
            v-model="state3"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="2" class="demo-left">
          <div class="sub-title">费用科目</div>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2" class="demo-left">
          <div class="sub-title">购进金额(万元)</div>
          <el-input
            class="inline-input"
            v-model="state5"
            placeholder="请输入"
          ></el-input>
        </el-col>
        <el-col :span="3" class="demo-left">
          <div class="sub-title">费用科目</div>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3" class="demo-left">
          <div class="sub-title">费用科目</div>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-col>
        <el-col :span="2" class="demo-left">
          <div class="sub-title">费用科目</div>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-col>
      </el-row>
      <div style="text-align: center; color: black"><h2>补充协议</h2></div>
      <div class="demo-position">
        <el-button type="primary">新增</el-button>
        <el-button type="warning">删除</el-button>
      </div>

      <el-tabs type="border-card">
        <el-tab-pane label="补充协议1">
          <h3>协议内容:</h3>
          <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 10 }"
            v-model="textarea2"
          >
          </el-input>
        </el-tab-pane>
        <el-tab-pane label="补充协议2"
          ><h3>协议内容:</h3>
          <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 10 }"
            v-model="textarea2"
          >
          </el-input
        ></el-tab-pane>
        <el-tab-pane label="补充协议3"
          ><h3>协议内容:</h3>
          <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 10 }"
            v-model="textarea2"
          >
          </el-input
        ></el-tab-pane>
      </el-tabs>

      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      state1: "",
      state2: "",
      state3: "",
      state4: "",
      state5: "",
      state6: "",
      state7: "",
      value: "",
      textarea2: "",
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        date3: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        input: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      tableData: [
        {
          date: "BJ0000000",
          name: "宁波医药",
          address: "浙江省",
        },
        {
          date: "BJ0000000",
          name: "上海医药",
          address: "浙江省",
        },
        {
          date: "BJ0000000",
          name: "北极医药",
          address: "浙江省",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "单选项1",
        },
        {
          value: "选项2",
          label: "2",
        },
        {
          value: "选项3",
          label: "3",
        },
        {
          value: "选项4",
          label: "4",
        },
        {
          value: "选项5",
          label: "5",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      this.$message("submit!");
    },
    onCancel() {
      this.$message({
        message: "cancel!",
        type: "warning",
      });
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
.row-text {
  text-align: center;
  line-height: 37px;
  font-size: 14px;
}
.row-text .row-span {
  font-weight: 1000;
  color: #000000;
}
.demo-left {
  margin-left: 3px;
}
.sub-title {
  font-size: 14px;
  font-weight: 700;
  color: #666666;
}
.demo-position {
  position: relative;
  z-index: 9;
  float: right;
}
</style>
